<template>
  <div class="app-container calendar-list-container" element-loading-text="正在导出数据">
  <!-- filter 条件查询 -->

  <div class="filter-container">
    <div style="display:flex;margin-bottom: 10px;" >
        <el-select
        clearable
        v-model="param.workCenter" 
        placeholder="请选择工作中心" 
        @focus="getCenterList" 
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item" 
            :label="item" v-for="(item,index) in this.centerList" 
            :key="index"/>
        </el-select>
  
        <el-input
        v-if="issueList.length == 0"
              @keyup.enter.native="getData"
              clearable
              style="margin-right: 15px;width: 150px"
              v-model="param.issueLarge"
              placeholder="问题大类"
          ></el-input>

        <el-select
        v-else
        clearable
        v-model="param.issueLarge" 
        placeholder="请选择问题大类"
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item" 
            :label="item" v-for="(item,index) in issueList"
            :key="index"/>
        </el-select>

        <el-date-picker
        v-model="param.years"
        type="year"
        placeholder="请选择年"
        value-format="yyyy"
        style="margin-right:15px;width: 100px">
        </el-date-picker>
        
        <el-date-picker
        v-model="param.month"
        type="month"
        value-format="MM"
        format="MM"
        placeholder="请选择月"
        style="margin-right:15px;width: 100px">
        </el-date-picker>

          <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
          <el-button
              type="button"
              v-waves
              class="el-button el-button--warning"
              @click="cancelSubmit"
          >
          重置</el-button>
      </div>
  </div>
  <div style="display: flex;">
    <div ref="left" style="width: 900px; height: 400px;"></div>
    <div ref="right" style="width: 800px; height: 700px;"></div>  
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts'
import { problemClassification } from '@/api/problem.js'
import { getCenter } from '@/api/workSection.js'
export default {
  name: 'problemClassification',
  data () {
      return {
          param: {
            workCenter: 'EMS总装车间',                      
            issueLarge: '',
            issueLittle: '',
            years: this.getCurrentYear(),        //年
            month: this.getCurrentMonth(),       //月   
          },
          yearsList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          loading: false, 
          userInfo: this.$store.state.user.userInfo,
          centerList: [],
          dataList:[],
          sumList:[],
          issueList:[]
      }
  },
  computed: {
    inputWid() {
      return function (value) {
          if(!value || (value.length <= 10)){
            return '150px'
          } else {
            return (150 + (String(value).length-10)*6) + 'px'
          }
      }
    }
  },
  methods: {
    // 获取当前年份
    getCurrentYear() {
        return new Date().getFullYear().toString();
      },
      // 获取当前月份
      getCurrentMonth() {
        const month = new Date().getMonth() + 1;
        return month < 10 ? '0' + month : month.toString();
      },
    // 获取工作中心
    async getCenterList() {
          let {data} = await getCenter()
          this.centerList = data
        },

      getData(){
        this.handleFilter()
      },
      async handleFilter() {
        let query = {}
        if(this.param.workCenter){ query.workCenter = this.param.workCenter}
        if(this.param.years){ query.years = this.param.years}
        if(this.param.month){ query.month = this.param.month}
        if(this.param.issueLarge){ query.issueLarge = this.param.issueLarge}
        let res = await problemClassification(query)
        console.log(res);
        if(res.code != 1 || !res.data.series){
          this.dataList = []
          this.sumList = []
          this.issueList = []
        } else {
          this.issueList = res.data.name
          res.data.series.forEach(item =>{
            item.type = 'bar',
            item.stack = 'Ad',
            this.emphasis = {
              focus: 'series'
            }
          })
          // 小类总数
          this.sumList = res.data.series[0].children.map(item =>{
            return{
              name: item.name,
              value: item.sum
            }
          })
          console.log(this.sumList);
          
          this.dataList = res.data.series
        }
        // 左侧图
        this.leftEcharts()
        // 右侧图
        this.rightEcharts()
      },
      cancelSubmit(){
          this.param = {     
          }
          this.handleFilter()
      },
      // 左图
      leftEcharts(){
        this.leftT = echarts.init(this.$refs.left)
        // 基于准备好的dom，初始化echarts实例
         const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              orient: 'vertical',
              top: '20%',
              right: '0%',
            },
            grid: {
              width: '700px',
              height: '400px',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: this.yearsList
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: this.dataList
          };
          this.leftT.setOption(option,true)
          },
        // 右图
        rightEcharts(){
          this.rightT = echarts.init(this.$refs.right);  
           // 指定图表的配置项和数据  
           const option = {
              title: {
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              grid: {
              width: '700px',
              height: '700px',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
              legend: {
                orient: 'vertical',
                top: '0%',
                right: '0%',
              },
              series: [
                {
                  name: '',
                  type: 'pie',
                  radius: '50%',
                  data: this.sumList,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
        // 使用刚指定的配置项和数据显示图表。  
        this.rightT.setOption(option,true)
      },
  },
  // 进入页面获取table信息
  mounted() {
      this.handleFilter()
  }
}
</script>

<style>

.btn-add{
  margin-bottom: 28px;
}

.ul-item{
width: 85%;
}
</style>
